<template>
  <div class="DeliveryContractHistory">
    <assets-head :title="$t('交割合约历史')" :backFunc="() => {
      if ($route.query.goback) {
        $router.push({
          path: '/funds',
          query: {
            tab: 2,
            index: 1// 0: 查看理财订单 1: 矿机
          }
        })
      } else {
        $router.go(-1)
      }
    
    }" />
    <div>
      <van-tabs ref="tabs" v-model="type" swipeable @change="onChange" sticky>
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
          <template v-if="type === 'orders'">
            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
              :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-32">
              <futrue-hold-list v-if="type === 'orders'" :list-data="dataList.orders" >
              </futrue-hold-list>
              <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!dataList.orders.length && !loading">
                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
              </div>
            </van-list>
          </template>

          <template v-if="type === 'hisorders'">
            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
              :finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-32">
              <futrue-histroy-position :list-data="dataList.hisorders"></futrue-histroy-position>
              <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.hisorders.length && !loading">
                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
              </div>
            </van-list>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { List,Tab, Tabs } from 'vant';
import futrueHoldList from '@/page/deliveryContract/hold.vue'
import futrueHistroyPosition from '@/page/deliveryContract/position.vue'
import { _futrueOrderList } from '@/API/trade.api'
import assetsHead from "@/components/assets-head";
export default {
  data() {
    return {
      type: "orders",
      dataList: {
        orders: [],
        hisorders: []
      },
      symbol: '',
      selectData: [
        { title: this.$t('当前委托'), type: 'orders' },
        { title: this.$t('历史仓位'), type: 'hisorders' },
      ],
      loading: false,
      finished: false,
      page: 1,
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    futrueHoldList,
    futrueHistroyPosition,
    assetsHead
  },
  methods: {
    onChange(e) {
      this.dataList[e] = []
      this.finished = false
      this.page = 1
      this.type = e
      this.loading = true;
      if (this.loading) {
        this.fetchData(this.symbol, this.type)
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    fetchData(symbol) {
      // TODO: 分页
      _futrueOrderList(symbol, this.type, this.page).then(data => {
        this.dataList[this.type] = this.dataList[this.type].concat(data)
        this.loading = false
        if (data.length < 10) {
          this.finished = true
        }
        this.page++
      })
    },
    onLoad() {
      this.fetchData(this.symbol, this.type)
    },
  },
  beforeRouteEnter(to, from, next) {
    const { query: { symbol } } = to
    next(vm => {
      vm.symbol = symbol
    })
  }
}
</script>
<style lang="scss">
.DeliveryContractHistory  {
  width: 100%;
  box-sizing: border-box;
  .position-padding {
    //border-bottom: 1px solid #F2F4F9;
    padding: 33px;
    box-sizing: border-box;
    width: 100%;
    float: left;

    .position-tag {
      display: flex;
      align-items: center;

      .position-tag-style {
        padding: 11px 28px;
        margin-right: 22px;
        font-style: normal;
        font-weight: 400;
        font-size: 26.4981px;
        color: #FFFFFF;
      }

      .position-tag-title {
        font-style: normal;
        font-weight: 600;
        font-size: 30.9145px;
        margin-right: 13px;
      }

      .position-tag-title2 {
        font-style: normal;
        font-weight: 400;
        font-size: 30.9145px;
        color: #848E9C;
      }

      .position-tag-img {
        margin-left: 11px;
        width: 40px;
        height: 31px;
      }
    }

    .red {
      background: #F6465D;
      border-radius: 6.6266px;
    }

    .green {
      background: #5EBA89;
      border-radius: 6.62453px;
    }

    .position-div1 {
      margin-top: 33px;
      width: 100%;
      float: left;

      .position-text1 {
        float: left;
        font-style: normal;
        font-weight: 400;
        font-size: 30px;
        color: #848E9C;
      }

      .position-text2 {
        float: right;
        font-style: normal;
        font-weight: 600;
        font-size: 30px;
      }

      .position-text3 {
        font-style: normal;
        font-weight: 400;
        font-size: 30px;
      }
    }
  }

  .color-red {
    color: #F6465D !important;
  }

  .color-green {
    color: #5EBA89 !important;
  }

  .color-blue {
    color: #1D91FF !important;
  }

  .van-tabs__nav {
    background: $tab_background;
  }

  .van-tab--active {
    color: $text_color;
  }
}
</style>
